<template>
  <div class="login-wrapper">
    <div class="login-box">
      <div class="login-left"><img src="@/assets/person.png" alt="" /></div>
      <div class="login-right">
        <div class="login-right-title">商超数据信息采集平台</div>
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :hideRequiredMark="true"
          :label-col="{ span: 24 }"
          :wrapper-col="{ span: 24 }"
        >
          <a-form-model-item label="请输入账号" prop="username">
            <a-input
              size="large"
              v-model="form.username"
              placeholder="请输入账号"
            />
          </a-form-model-item>
          <a-form-model-item label="请输入密码" prop="password">
            <a-input-password
              size="large"
              v-model="form.password"
              placeholder="请输入密码"
            />
          </a-form-model-item>
          <a-form-model-item>
            <a-button
              size="large"
              :loading="loading"
              style="width: 100%; margin-top: 25px"
              type="primary"
              @click="handleSubmit"
            >
              登录
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
    <div class="login-botton">技术支持：临沂市中信信息技术有限公司</div>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
export default {
  data() {
    return {
      loading: false,
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      form: {},
    };
  },
  methods: {
    handleSubmit() {
      // console.log(this.form)
      this.loading = true;
      this.$store.dispatch("user/login", this.form).then((res) => {
        this.loading = false;
        if (res) {
          this.$router.replace("/");
          console.log(this);
          message.success("登录成功");
        } else {
          message.error("登录失败");
        }
      });
    },
  },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.login-wrapper {
  width: 100%;
  height: 100%;
  background: url("../../assets/backdrop.png");
  background-size: 100% auto;
  // overflow-y: hidden;
  margin: 0;
  .login-box {
    width: 1230px;
    height: 600px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .login-left {
      width: 60%;
      height: 100%;
      float: left;
      img {
        width: 100%;
      }
    }
    .login-right {
      padding: 0 80px;
      width: 40%;
      display: inline-block;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      .login-right-title {
        font-size: 26px;
        font-family: "TsangerYuYangT";
        color: @primary-color;
        text-align: center;
        padding-bottom: 75px;
        letter-spacing: 1px;
      }
    }
  }
  .login-botton {
    font-size: 14px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #5b5c5e;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
